<template>
  <div>
    <div class="spreadsheet">
      <ve-table
        :disabled="true"
        style="word-break: break-word"
        fixed-header
        :scroll-width="0"
        :max-height="130"
        border-y
        :columns="columns"
        :table-data="tableData"
        row-key-field-name="rowKey"
        :virtual-scroll-option="virtualScrollOption"
        :cell-autofill-option="cellAutofillOption"
        :edit-option="editOption"
        :contextmenu-body-option="contextmenuBodyOption"
        :contextmenu-header-option="contextmenuHeaderOption"
        :row-style-option="rowStyleOption"
        :column-width-resize-option="columnWidthResizeOption"
      />
    </div>

    <!-- <el-button type="primary" @click="addCol">加 列</el-button>
    <el-button type="primary" @click="removeCol">删除列</el-button>
    <el-button type="primary" @click="xxx">加行</el-button>
    <el-button type="primary" @click="yyy">删除行</el-button>
    <el-button type="primary" @click="save">保存</el-button> -->
  </div>
</template>

<script>
import { VeTable } from "vue-easytable";
const COLUMN_KEYS = [
  "A",
  "B",
  "C",
  "D",
  "E",
  "F",
  "G",
  "H",
  "I",
  "J",
  "K",
  "L",
  "M",
  "N",
  "O",
  "P",
  "Q",
  "R",
  "S",
  "T",
  "U",
  "V",
  "W",
  "X",
  "Y",
  "Z"
];

export default {
  props: {
    value: [String, Object, Array],
    readonly:[Boolean]
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          // 首先将值转为数组
          this.tableData = JSON.parse(val)
        } else {
          this.fileList = [];
          return [];
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      keyCount:0,
      startRowIndex: 0,
      // 是否开启列宽可变
      columnWidthResizeOption: {
        enable: true
      },
      // 虚拟滚动配置
      virtualScrollOption: {
        enable: true,
        scrolling: this.scrolling
      },
      // 单元格自动填充配置
      cellAutofillOption: {
        directionX: true,
        directionY: true
      },
      // 单元格编辑配置
      editOption: {
        beforeStartCellEditing:({ row, column, changeValue }) => {
          if(this.readonly){
            return false
          }
          console.log(row, column, changeValue);
          console.log(this.tableData);
          this.$emit("input", JSON.stringify(this.tableData));
        },

        afterCellValueChange: ({ row, column, changeValue }) => {
          console.log(row, column, changeValue);
          console.log(this.tableData);
          this.$emit("input", JSON.stringify(this.tableData));
        }
      },
      // header 右键菜单配置
      contextmenuHeaderOption: {
        contextmenus: [
          {
            type: "CUT"
          },
          {
            type: "COPY"
          },
          {
            type: "EMPTY_COLUMN"
          }
        ]
      },
      // body 右键菜单配置
      contextmenuBodyOption: {
        contextmenus: [
          {
            type: "CUT"
          },
          {
            type: "COPY"
          },
          {
            type: "SEPARATOR"
          },
          {
            type: "INSERT_ROW_ABOVE"
          },
          {
            type: "INSERT_ROW_BELOW"
          },
          {
            type: "SEPARATOR"
          },
          {
            type: "REMOVE_ROW"
          },
          {
            type: "EMPTY_ROW"
          },
          {
            type: "EMPTY_CELL"
          }
        ]
      },
      // 行样式配置
      rowStyleOption: {
        clickHighlight: false,
        hoverHighlight: false
      },
      tableData: []
     
    };
  },
  computed: {
    columns() {
      let columns = [
        {
          field: "index",
          key: "index",
          operationColumn: true,
          title: "",
          width: 25,
          fixed: "left",
          renderBodyCell: this.renderRowIndex
        }
      ];
      columns = columns.concat(
        COLUMN_KEYS.map(keyValue => {
          return {
            title: keyValue,
            field: keyValue,
            key: keyValue,
            width: 90,
            edit: true
          };
        })
      );
      return columns;
    }
  },
  created() {
    this.initTableData();
  },
  methods: {
    renderRowIndex({ row, column, rowIndex }) {
      return <span>{rowIndex + this.startRowIndex + 1}</span>;
    },
    scrolling({
      startRowIndex,
      visibleStartIndex,
      visibleEndIndex,
      visibleAboveCount,
      visibleBelowCount
    }) {
      this.startRowIndex = startRowIndex;
    },
    // 初始化表格
    initTableData() {
      if(!this.tableData || this.tableData.length==0){
        let tableData = [];
        for (let i = 0; i < 2; i++) {
          let dataItem = {
            rowKey: i
          };
          COLUMN_KEYS.forEach(keyValue => {
            dataItem[keyValue] = "";
          });
          tableData.push(dataItem);
        }
        this.tableData = tableData;
      }
    },

    addCol() {
      this.keyCount++;
      let pre = "added";
      let keyStr = pre + this.keyCount.toString();
      console.log('addcol:',keyStr);
      this.columns.push({
        title: keyStr + " title",
        field: keyStr,
        key: keyStr,
        width: 90,
        edit: true
      });
    },
    removeCol() {
       console.log(this.tableData);
    },
    xxx() {
       console.log(this.tableData);
    },
    yyy() {
       console.log(this.tableData);
    },
    save() {
      console.log(this.tableData);
      this.$emit("input", JSON.stringify(this.tableData));
    }
  }
};
</script>
<style lang="scss">
.spreadsheet {
  padding: 0 10px;
  margin: 20px 0;
}
.el-form-item--medium .el-form-item__content {
    line-height: 20px;
}
</style>
